@mixin icondianFize {
  font-size: 0.8rem;
}

.disPlayNone {
  display: none !important;
}

.disPlayBlock {
  display: block !important;
}

.showSetParm {
  min-width: 680px !important;
}

.STTreeMenu {
  width: 55% !important;
}

.ivu-checkbox-inner {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  top: 0;
  left: 0;
  border: 1px solid #dcdee2;
  border-radius: 2px;
  background-color: transparent !important;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  vertical-align: middle;
}

.ivu-checkbox-inner:after {
  border: 2px solid #fff;
}

.checkInput-active:after {
  content: '';
  display: table;
  width: 4px;
  height: 8px;
  position: absolute;
  left: 4px;
  border-top: 0 !important;
  border-left: 0 !important;
  box-sizing: border-box;
  -webkit-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menuDialog {
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  .el-dialog {
    width: 1000px;
    height: 600px;
    margin-top: 0px !important;
    margin: unset !important;
  }

  .dialogTitle {
    display: flex;
    font-size: 18px;
    color: #f0f4ff;

    span:last-child {
      display: inline-block;
      width: 45%;
    }

    span:first-child {
      display: inline-block;
      width: 100%;
    }
  }

  .equipSelect {
    transform: translateY(0%) !important;
    .el-input__icon {
      display: flex !important;
      justify-content: center;
      align-items: center;
    }
    .noData {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .el-dialog__body {
      width: 100%;
      height: 488px;
      padding: 0px !important;
      display: flex;
      justify-content: space-between;
      position: relative;
      //   border-top: 1px solid rgba(240, 244, 255, 0.45);
      .contentBox:first-child {
        border-left: 0px !important;
        width: calc(100% - 66%);
      }
      .contentBox {
        width: 33%;
        border-left: 0.5px solid;
        border-color: #474a56;
        padding: 0 8px;
        .title {
          width: calc(100% + 16px);
          margin-left: -8px;
          height: 30px;
          line-height: 30px;
          border-bottom: 1px solid;
          padding: 0 12px;
          box-sizing: border-box;
          margin-bottom: 8px;
          border-color: #474a56;
          display: flex;
          justify-content: space-between;
          label {
            margin-left: 4px;
          }
        }
        .datePicker {
          height: 32px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .el-input {
            margin-bottom: 0px !important;
            height: 32px;
          }
        }

        .el-input {
          height: 32px;
          margin-bottom: 8px;
        }
        .el-input__inner {
          height: 100%;
          padding-right: 0px;
          padding-left: 0px;
          text-align: center;
        }

        .main {
          height: calc(100% - 94px);
          background-color: #181c29;
          .points {
            width: 100%;
            height: 100%;
            padding: 8px;
            overflow: auto;
            .point {
              width: 100%;
              height: 32px;
              border: 1px solid #474a56;
              background-color: #252833;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              padding-left: 12px;
              box-sizing: border-box;
              border-radius: 2px;
              cursor: pointer;
              user-select: none;
            }
            .point:not(:first-child) {
              margin-top: 8px;
            }
            .point:hover {
              transition: 0.3s;
              background-color: #485065 !important;
            }
            .pointSelect {
              background-color: #3875ff !important;
            }
            .pointSelect:hover {
              background-color: #5787f8 !important;
            }
          }
        }
      }
    }

    .el-dialog__body::before {
      content: '';
      height: 1px; //控制边框宽度
      width: 200%; //控制边框长度
      position: absolute;
      left: 0px;
      top: 0px;
      right: auto;
      background-color: rgba(240, 244, 255, 0.45);
      border: 0px solid transparent;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      transform: scale(0.5); //缩放宽度，达到0.5px的效果
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
      -o-transform: scale(0.5);
      transform-origin: top left; //定义缩放基点
      -webkit-transform-origin: top left;
      -moz-transform-origin: top left;
      -ms-transform-origin: top left;
      -o-transform-origin: top left;
    }

    .el-dialog__footer {
      .bottomBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;

        button {
          height: 30px;
          width: 78px;
          line-height: 6px;
          position: relative; // right: 20px;

          span {
            color: white;
          }
        }
      }

      position: relative;
    }

    .el-tree-node__content {
      background-color: white;
    }

    .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content {
      background-color: #d2e7f1;
    }

    .el-tree-node {
      margin-top: 2px !important;
    }

    .parent_tag,
    .child_tags {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      background-color: #252833;
      line-height: 30px;
    }

    .child_tags {
      padding-left: 5px;
      box-sizing: border-box;
    }

    .child_tags:hover {
      transition: 0.3s;
      background-color: #485065 !important;
    }

    .parentLevelTwoMenu {
      width: calc(100% - 2.5rem) !important;
      margin-left: 2.5rem;
      margin-top: 5px !important;
    }

    .sidebar-menu .active > ul > ul {
      display: block !important;
    }

    .el-dialog {
      margin-top: 0px !important;

      .el-button {
        height: 30px;
        line-height: 5px;
      }
    }

    .treeMenuBox {
      width: 320px;
      height: 100%;
      position: relative;
      padding: 0 8px;
      margin-bottom: 12px;

      .arrowHide {
        display: none;
      }

      .arrowShow {
        display: block;
      }

      .active {
        & > .link_box {
          .arrowHide {
            display: none !important;
          }

          .arrowShow {
            display: block !important;
          }
        }

        & > ul {
          display: block !important;

          & > ul {
            display: block !important;
          }
        }
      }

      .main {
        height: calc(100% - 94px);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: relative;

        .treeMenu {
          width: 100%;
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
          padding: 8px;
          background-color: #181c29;
        }
      }
    }

    .equipSelectRight:after {
      content: '';
      height: 1px; //控制边框宽度
      width: 200%; //控制边框长度
      position: absolute;
      left: 0px;
      top: auto;
      right: auto;
      bottom: 2px;
      background-color: #eeeddd;
      border: 0px solid transparent;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      transform: scale(0.5); //缩放宽度，达到0.5px的效果
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
      -o-transform: scale(0.5);
      transform-origin: top left; //定义缩放基点
      -webkit-transform-origin: top left;
      -moz-transform-origin: top left;
      -ms-transform-origin: top left;
      -o-transform-origin: top left;
    }

    .equipSelectRight::before {
      content: '';
      height: 1px; //控制边框宽度
      width: 200%; //控制边框长度
      position: absolute;
      left: 0px;
      top: 0px;
      right: auto;
      background-color: #eeeeee;
      border: 0px solid transparent;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      transform: scale(0.5); //缩放宽度，达到0.5px的效果
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
      -o-transform: scale(0.5);
      transform-origin: top left; //定义缩放基点
      -webkit-transform-origin: top left;
      -moz-transform-origin: top left;
      -ms-transform-origin: top left;
      -o-transform-origin: top left;
    }

    .equipSelectRight {
      width: 45%;
      height: 387px;
      padding: 8px;
      float: right;
      position: relative;
      margin-bottom: 12px;

      .title {
        height: 47px;
        padding: 15px 20px 10px;
        font-size: 18px;
        text-align: center;
        border-bottom: 1px solid #f5f5f5;
      }

      .setParmMain {
        height: 336px;
        background-color: #181c29;
        padding: 8px;

        .setParm {
          height: 32px;
          padding: 5px;
          box-sizing: border-box;
          background-color: #252833;
          border: 0.5px solid rgba(240, 244, 255, 0.16);
          margin-top: 10px;
          line-height: 20px;
          cursor: pointer;
        }

        .setParm:first-child {
          margin-top: 0px;
        }
      }
    }

    .selectedColor {
      background-color: #4cacf4 !important;
      color: white !important;

      a {
        color: white !important;
      }
    }

    .pagination {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      border-top: 0.5px solid rgba(240, 244, 255, 0.16);
      height: 34px;
      padding-top: 8px;
      align-items: center;

      .el-pagination .active {
        color: #409eff !important;
      }
    }

    .el-input {
      input {
        @include list-height;
      }

      .el-input__suffix {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    }

    // 无查找结果
    .promptResults {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      color: #999fa8;
      font-size: 0.875rem;
    }

    .el-radio-group {
      width: 100%;

      .el-radio {
        width: 100%;
      }
    }

    .treeNav {
      margin-bottom: 5px;
      font-size: 0.875rem;

      ul {
        width: 100%;
        display: none;
      }

      a {
        color: #fff;
        text-decoration: none;
      }

      .link_box {
        width: 100%;
        @include list-height;
        border-radius: 3px;
        border: 0.5px solid rgba(240, 244, 255, 0.16);
        overflow: hidden;

        > span {
          width: 20px;
          height: 32px !important;
          float: right;
          text-align: center;
          z-index: 99999;

          .el-button {
            padding: 0;
            right: 0;
            width: 20px !important;
            height: 32px;
            border: none;
            background: none;
          }
        }

        .option {
          width: 20px;
          float: right;
          text-align: center;
          z-index: 99999;
        }
      }

      .parent_tag {
        position: relative;
        float: left;
        width: 100%;
        @include list-height;

        .arrow {
          position: relative;
          padding-left: 3px;
          height: 100%;

          i {
            display: block;
            font-size: 14px;
            color: #999fa8;

            &:last-child {
              display: none;
            }
          }
        }

        .icondian {
          float: left;
          margin: 0 3px 0 5px;
          width: 15px;
          @include icondianFize;
          color: #8c8c8c;
        }

        a {
          float: left;
          display: block; // width: calc(90% - 45px);
          width: 70%;
          @include list-height;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          position: relative;
          margin-left: 4px;
        }

        .el-icon-more {
          position: absolute;
          right: -10px;
          top: 30%;
          transform: translateY(-30%);
          color: #979797;
          transform: rotate(90deg);
          cursor: pointer;
        }
      }

      .child_tags {
        position: relative;
        margin: 4px 0 0 2.3rem;
        width: auto;
        @include list-height;
        border-radius: 3px;
        cursor: pointer;
        border: 0.5px solid rgba(240, 244, 255, 0.16);
        display: flex;

        @media screen and (max-width: 1595px) {
          margin: 4px 0 0 2.5rem;
        }

        @media screen and (max-width: 1365px) {
          margin: 4px 0 0 2.5rem;
        }

        &:after {
          position: absolute;
          content: '';
          left: -20px;
          top: 50%;
          transform: translateY(-50%);
          display: block;
          width: 1rem;
          border: 1px dashed #8c8c8c;
        }

        &:before {
          position: absolute;
          content: '';
          left: -22px;
          top: -4px;
          display: block;
          height: 28px;
          border: 1px dashed #8c8c8c;
        }

        &:first-child {
          &:before {
            position: absolute;
            content: '';
            left: -22px;
            top: -4px;
            display: block;
            height: 28px;
            border: 1px dashed #8c8c8c;
          }
        }

        &:last-child {
          &:before {
            position: absolute;
            content: '';
            left: -22px;
            top: -4px;
            display: block;
            height: 20px;
            border: 1px dashed #8c8c8c;
          }
        }

        .icondian {
          margin: 0 5px 0 12px;
          display: block;
          float: left;
          width: 15px;
          @include icondianFize;
        }

        a {
          float: left;
          display: block;
          width: calc(100% - 40px);
          @include list-height;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-left: 4px;
        }

        .el-icon-more {
          position: absolute;
          right: 3px;
          top: 30%;
          transform: translateY(-30%);
          color: #979797;
          transform: rotate(90deg);
          cursor: pointer;
        }
      }

      .active {
        color: red;
        display: block;
      }

      .active_child {
        background-color: #3875ff;
        border-color: #3875ff;

        a,
        .el-icon-more {
          color: #262626;
        }
      }

      .father_active {
        color: #fff !important;
        border-radius: 3px;
        background-color: rgba(31, 35, 47, 1);

        a {
          color: #fff !important;
        }
      }

      .active_father {
        background-color: #2d2e30;

        .option,
        .arrow i,
        .el-button,
        a {
          color: white;
        }
      }
    }

    /deep/ .el-radio__input {
      display: none;
    }

    /deep/ .el-radio__label {
      padding: 0;
    }

    .equipListItem {
      font-size: 0.875rem;
      height: 68px;
      margin-bottom: 4px;
      padding: 0 12px;
      background: #f8f8f8;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .equipItemInfo {
        display: inline-block;

        .equipName {
          font-family: '思源黑体' Regular;
          margin-bottom: 10px;

          span {
            margin-left: 16px;
          }
        }

        .equipNum {
          p {
            width: 40px;
            font-size: 0.75rem;
            text-align: center;
            line-height: 16px;
            background: #cccccc;
            color: #fff;
            margin-right: 3px;
            border-radius: 3px;
            display: inline-block;
          }
        }
      }

      .el-icon-more {
        color: #979797;
        transform: rotate(90deg);
        cursor: pointer;
      }
    }

    .is-checked {
      .equipListItem {
        background: #1f232f;
        color: #fff;
        opacity: 0.9;

        .equipNum {
          p {
            background: #4f535f !important;
          }
        }
      }
    }

    // 折叠
    /deep/ .el-collapse {
      .el-collapse-item__header {
        padding-left: 30px;
        position: relative;
        color: red !important;

        .el-icon-arrow-right {
          position: absolute;
          left: 10px;
        }
      }
    }
  }

  .operation {
    position: absolute;
    right: 10px;
    color: white;
  }
}

@media (max-width: $screen-xs-max) {
  .menuDialog {
    .equipSelect {
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      transform: translateY(0%) !important;

      .el-dialog__header {
        @include mobileAlertHeader;
      }

      .el-dialog__body {
        @include mobileAlertBody;
      }

      .el-dialog__footer {
        @include mobileAlertFooter;

        span.dialog-footer {
          height: 100%;

          .bottomBtn {
            height: 100%;
            line-height: 64px;
          }
        }
      }
    }
  }
}
